import React,{createRef,useRef,useEffect} from 'react'
/**
 * createRef 在组件初始化挂载前获取的时null，在挂载之后才能获取到对应的dom元素通过current属性获取对应的dom对象
 * 但是createRef在每次重新渲染的时候都会创建一个新的ref对象
 * 
 * useRef 在第一次渲染的时候创建一个对象以后，之后重新渲染时，如果发现这个对象创建过，它就不会再去创建新的对象，所以新能要更好一些
 * @returns 
 */
export default function App() {
  const inputRef = createRef()
  const useInputRef = useRef()
  console.log(inputRef,'inputRef1')
    console.log(useInputRef,'useInputRef1')
  useEffect(()=>{
    console.log(inputRef,'inputRef')
    console.log(useInputRef,'useInputRef')
    return ()=>{

    }
  })
  return (
    <div>
      <input ref={inputRef}/>
      <button onClick={()=>inputRef.current.focus()}>获取焦点</button>
      <input ref={useInputRef}/>
      <button onClick={()=>useInputRef.current.focus()}>获取焦点</button>
    </div>
  )
}
